import React from 'react'
import './index.css'
import { useState} from 'react'
export default function Item(props) {
  const [mouse,setMouse] = useState(false)
  const {todo} = props
  
  //判断鼠标是否意如
  let handleMouse = (flag) => {
      return ()=>{
           setMouse(flag)
      }
  }

  // 判断是否选中
  let handleCheck = (id) => {
    return (event) => {
        props.updateTodo(id, event.target.checked)
    }
  }

  // 删除的回掉函数
  let handleDelete = (id) => {
    return (event) => {
      if(window.confirm("确定要删除吗")){
         props.deleteTodo(id)
      }
     
    }
  }
  return (
    <li onMouseEnter={handleMouse(true)} onMouseLeave = {handleMouse(false)} style={{backgroundColor:mouse ? '#ddd' :'#FFF'}}>
      <label>
        <input  checked={todo.done} onChange = {handleCheck(todo.id)} type="checkbox"/>
        <span>{todo.name}</span>
      </label>
      <button onClick={handleDelete(todo.id)} className="btn btn-danger" style={{display:mouse ? 'block' : 'none'}}>删除</button>
    </li>
  )
}
